<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚美集团 - 聚美优品 - 聚美优品为聚美集团旗下电商业务，是国内最大的化妆品电商平台，千万用户推荐！</title>
    <link rel="stylesheet" href="../swiper/swiper-bundle.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="header_top">
        <div class="w">
            <ul class="left clearfix">
                <li><a href="">欢迎来到聚美！</a></li>
                <li><a href="../html/login.html">请登录</a></li>
                <li><a href="../html/reg.html">快速注册</a></li>
            </ul>
            <ul class="right clearfix">
                <li><a href="">订单查询</a></li>
                <li>
                    <a href=""><s class="favorite"></s> 收藏的品牌</a>
                </li>
                <li class="my"><a href="">我的聚美 <s class="arrow_down"></s></a>
                    <span class="white"></span>
                    <ul class="hid">
                        <li><a href="">我的订单</a></li>
                        <li><a href="">我的现金券</a></li>
                        <li><a href="">我的红包</a></li>
                        <li><a href="">我的余额</a></li>
                        <li><a href="">我的提现退款</a></li>
                        <li><a href="">我的收藏</a></li>
                        <li><a href="">我的心愿单</a></li>
                        <li><a href="">会员中心</a></li>
                        <li><a href="">礼品卡兑换</a></li>
                    </ul>
                </li>
                <li><a href=""><span class="line"></span><s class="moblie"></s>手机聚美</a></li>
                <li><span class="line"></span></li>
                <li class="my"><a href="">更多<s class="arrow_down"></s></a>
                    <span class="white"></span>
                    <ul class="hid more">
                        <li><a href="">邀请好友</a></li>
                        <li><a href="">加入收藏</a></li>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">聚美微信</a></li>
                        <li><a href="">百度贴吧</a></li>
                        <li><a href="">腾讯微博</a></li>
                        <li><a href="">个人公众主页</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="header_center">
        <div class="w">
            <div class="logo">
                <a href="">
                    <img src="../img/logo.jpg" alt="">
                </a>
            </div>
            <div class="search_box">
                <form action="">
                    <input type="text"><button type="submit">搜索</button>
                    <ul class="tip_a">
                        <li class="active"><span class="name">补水</span><span class="num">约2730件</span></li>
                        <li><span class="name">洁面</span><span class="num">约1058件</span></li>
                        <li><span class="name">面膜</span><span class="num">约885件</span></li>
                        <li><span class="name">眼霜</span><span class="num">约328件</span></li>
                        <li><span class="name">爽肤水</span><span class="num">约893件</span></li>
                        <li><span class="name">口红</span><span class="num">约475件</span></li>
                        <li><span class="name">粉饼</span><span class="num">约33件</span></li>
                        <li><span class="name">卸妆</span><span class="num">约304件</span></li>
                        <li><span class="name">隔离</span><span class="num">约191件</span></li>
                    </ul>
                </form>
                <ul class="list">
                    <li><a href="">保湿</a><s class="line"></s></li>
                    <li><a href="">面膜</a><s class="line"></s></li>
                    <li><a href="">洗面奶</a> <s class="line"></s></li>
                    <li><a href="">补水</a><s class="line"></s></li>
                    <li><a href="">香水</a><s class="line"></s></li>
                    <li><a href="">眼霜</a><s class="line"></s></li>
                    <li><a href="">口红</a><s class="line"></s></li>
                    <li><a href="">护肤套装</a><s class="line"></s></li>
                    <li><a href="">BB霜</a></li>
                </ul>
            </div>
            <div class="cart_box">
                <a href="" class="cart">
                    <img src="../img/cart.gif" alt="">
                    <span>去购物车结算</span>
                    <s class="arrow_down"></s>
                    <i class="white"></i>
                    <div class="hid">
                        购物车中还没有商品，<br> 赶快挑选心爱的商品吧！
                    </div>
                </a>
            </div>
        </div>

    </div>
    <div class="header_bottom">
        <div class="w">
            <ul class="nav">
                <li><a href="">首页</a></li>
                <li><a href="">极速免税店</a></li>
                <li><a href="">母婴特卖</a></li>
                <li><a href="">美妆商城 <s class="arrow_down"></s></a>
                 <div class="more_list">

                 </div>
                </li>
                <li><a href="">国际轻奢</a></li>
                <li><a href="">品牌专场</a></li>
            </ul>
            <ul class="real clearfix">
                <li><a href=""><img src="../img/z_01new.jpg" alt=""></a></li>
                <li><a href=""><img src="../img/z03.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="">
                        <img src="../img/banner2.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href=""><img src="../img/banner.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href=""><img src="../img/banner3.jpg" alt=""></a>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="fixaside">
        <div class="outer">
            <ul class="ibar_mp_center">
                <li>
                    <a href="" class="on"><s class="login"></s> </a>
                    <div class="login_box">
                        <img src="../img/avatar_nonesign.jpg" alt="">
                        <p>你好！请<a href="../html/login.html"> 登录 </a><span>|</span><a href="../html/reg.html"> 注册 </a></p>
                        <hr>
                        <div class="login_btnbox clearfix">
                            <a href="" class="login_order">我的订单</a>
                            <a href="" class="login_favorite">我的收藏</a>
                        </div>
                        <s class="arrow_white"></s>
                        <s class="close"></s>
                    </div>
                </li>
                <li><a href="javascript:;" class="tw"><s class="car"></s><span class="txt">购物车</span><span
                            class="num">0</span></a></li>
                <li>
                    <a href="javascript:;" class="th"><s class="money"></s>
                        <span class="my_presure">我的财产</span>

                    </a>
                </li>
                <li>
                    <a href="" class="fo"><s class="like"></s>
                        <span class="my_wish">我的心愿单</span>
                    </a>
                </li>
                <li><a href="" class="fi">
                        <s class="history"></s>
                        <span class="my_history">我看过的</span>
                    </a></li>
            </ul>
            <ul class="ibar_mp_foot">
                <li>
                    <a href="">
                        <s class="erma"></s>
                        <span class="">
                            <img src="../img/erma.png" alt="">
                        </span>
                    </a>
                </li>
                <li>
                    <a href=""><s class="serve"></s>
                        <span class="kefu">客服中心</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <s class="top"></s>
                        <span class="to_top">返回顶部</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="ibar_mp_carlist">
            <h2>购物车 <s class="close"></s></h2>
            <hr>
            <div class="carlist_empty">
            </div>
            <div class="carlist">
             
            </div>
        </div>
    </div>
    <div class="product_list clearfix">
        <div class="w clearfix">
            <h2 class="title"></h2>
            <h2 class="today_deals"><span>每日十点上新</span></h2>
            <ul class="items_list clearfix">
                <!-- <li>
                    <div class="imgbox">
                        <a href="">
                            <img src="../img/p1.jpg" alt="">
                        </a>
                    </div>
                    <div class="join">
                        <a href="javascript:;">加入购物车</a>
                        <ul class="details">
                            <li>美帝优10片*3盒</li>
                            <li>邓伦款10片*3盒</li>
                        </ul>
                    </div>
                    <div class="desc">
                        <p class="desc_item">韩国LEADERS丽得姿美蒂优氨基酸面膜10片*3盒</p>
                        <p class="price"><span>￥</span>89</p>
                    </div>
                </li>
                <li>
                    <div class="imgbox">
                        <a href="">
                            <img src="../img/p2.jpg" alt="">
                        </a>
                    </div>
                    <div class="join"><a href="javascript:;">加入购物车</a>
                        <ul class="details">
                            <li>美帝优10片*3盒</li>
                            <li>邓伦款10片*3盒</li>
                        </ul>
                    </div>
                    <div class="desc">
                        <p class="desc_item">韩国LEADERS丽得姿美蒂优氨基酸面膜10片*3盒</p>
                        <p class="price"><span>￥</span>89</p>
                    </div>
                </li>
                <li>
                    <div class="imgbox">
                        <a href="">
                            <img src="../img/p3.jpg" alt="">
                        </a>
                    </div>
                    <div class="join"><a href="javascript:;">加入购物车</a>
                        <ul class="details">
                            <li>美帝优10片*3盒</li>
                            <li>邓伦款10片*3盒</li>
                        </ul>
                    </div>
                    <div class="desc">
                        <p class="desc_item">韩国LEADERS丽得姿美蒂优氨基酸面膜10片*3盒</p>
                        <p class="price"><span>￥</span>89</p>
                    </div>
                </li>
                <li>
                    <div class="imgbox">
                        <a href="">
                            <img src="../img/p4.jpg" alt="">
                        </a>
                    </div>
                    <div class="join"><a href="javascript:;">加入购物车</a>
                        <ul class="details">
                            <li>美帝优10片*3盒</li>
                            <li>邓伦款10片*3盒</li>
                        </ul>
                    </div>
                    <div class="desc">
                        <p class="desc_item">韩国LEADERS丽得姿美蒂优氨基酸面膜10片*3盒</p>
                        <p class="price"><span>￥</span>89</p>
                    </div>
                </li>
                <li>
                    <div class="imgbox">
                        <a href="">
                            <img src="../img/p5.jpg" alt="">
                        </a>
                    </div>
                    <div class="join"><a href="javascript:;">加入购物车</a>
                        <ul class="details">
                            <li>美帝优10片*3盒</li>
                            <li>邓伦款10片*3盒</li>
                        </ul>
                    </div>
                    <div class="desc">
                        <p class="desc_item">韩国LEADERS丽得姿美蒂优氨基酸面膜10片*3盒</p>
                        <p class="price"><span>￥</span>89</p>
                    </div>
                </li>
                <li>
                    <div class="imgbox">
                        <a href="">
                            <img src="../img/p6.jpg" alt="">
                        </a>
                    </div>
                    <div class="join"><a href="javascript:;">加入购物车</a>
                        <ul class="details">
                            <li>美帝优10片*3盒</li>
                            <li>邓伦款10片*3盒</li>
                        </ul>
                    </div>
                    <div class="desc">
                        <p class="desc_item">韩国LEADERS丽得姿美蒂优氨基酸面膜10片*3盒</p>
                        <p class="price"><span>￥</span>89</p>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
    <ul class="home_nav_bar clearfix">
        <li class="clearfix"><a href="javascript:;">聚美首页</a></li>
        <li class="clearfix">
            <a href="" class="nav_mustsee">每日必看</a>
        </li>
        <li class="clearfix"><a href="" class="nav_today_deals">上单新品</a></li>
    </ul>
</body>
<script src="../js/axios.min.js"></script>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../js/api.js"></script>
<script src="../swiper/swiper-bundle.js"></script>
<script src="../js/index.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
        },
        loop: true,
        autoplay: true,
    });
</script>

</html>